<template>
  <div class="content">
    <div class="topSearch">
      <el-carousel :interval="5000" height="400px" arrow="always">
        <el-carousel-item>
          <img src="@/assets/loginImgs/collegeBanner.jpg" alt="">
          <!-- <img src="@/assets/loginImgs/collegeBanner1.jpg" alt=""> -->
        </el-carousel-item>
        <el-carousel-item>
          <!-- <img src="@/assets/loginImgs/collegeBanner.jpg" alt=""> -->
          <img src="@/assets/loginImgs/collegeBanner1.jpg" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="center-bottom">
      <div class="courses-title">
        <span>SELECT COURSES</span>
        <span style="color: #14ac60" @click="getMore('SELECT COURSES')">More>></span>
      </div>
      <el-row :gutter="40">
        <el-col
          v-for="(item) in tableData"
          :key="item.id"
          :span="6"
          class="col-margin"
        ><div class="grid-content bg-purple">
          <div style="cursor: pointer;" @click="goDetial(item.article.id)">
            <div class="center-demo">
              <img :src="imgPrefix + item.article.coverUri" alt="">
            </div>
            <div class="center-desc">
              <p class="desc-p">{{ item.article.title }}</p>
              <p>
                <el-rate v-model="value1" />
              </p>
              <p class="desc-like">
                <span class="el-icon-chat-round" />6 |
                <span class="el-icon-user" />123人学习
              </p>
            </div>
          </div>
        </div>
        </el-col>
      </el-row>
      <div style="text-align: center;margin: calc(100vw / 96) 0;">
        <el-pagination
          v-if="tableData.length > 32"
          background
          :current-page="pageNo"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div class="center-bottom">
      <div class="courses-title">
        <span>HOT LIVE</span>
        <span style="color: #14ac60" @click="getMore('HOT LIVE')">More>></span>
      </div>
      <el-row :gutter="40">
        <el-col
          v-for="(item) in tableData"
          :key="item.id"
          :span="6"
          class="col-margin"
        ><div class="grid-content bg-purple">
          <div style="cursor: pointer;" @click="goDetial(item.article.id)">
            <div class="center-demo">
              <img :src="imgPrefix + item.article.coverUri" alt="">
            </div>
            <div class="center-desc">
              <p class="desc-p">{{ item.article.title }}</p>
              <p>
                <el-rate v-model="value1" />
              </p>
              <p class="desc-like">
                <span class="el-icon-chat-round" />6 |
                <span class="el-icon-user" />123人学习
              </p>
            </div>
          </div>
        </div>
        </el-col>
      </el-row>
      <div style="text-align: center;margin: calc(100vw / 96) 0;">
        <el-pagination
          v-if="tableData.length > 32"
          background
          :current-page="pageNo"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { helpPage } from '@/api/article';
export default {
  data() {
    return {
      tableData: [],
      pageNo: 1,
      pageSize: 32,
      total: 0,
      searchName: '',
      loading: true,
      value1: 3
    };
  },
  mounted() {
    this.categoryMenu();
  },
  methods: {
    search() {
      this.categoryMenu();
    },
    goDetial(id, index) {
      this.$router.push({
        path: '/home/collegeDetial',
        query: { num: id }
      });
    },
    getMore(type) {
      this.$router.push({
        path: '/home/collegeLearn',
        query: { num: type }
      });
    },
    categoryMenu(id) {
      this.loading = true;
      helpPage({
        articleCategoryId: -1,
        beginCreateTime: '',
        endCreateTime: '',
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        title: this.searchName,
        type: 1
      }).then((res) => {
        this.tableData = res.data.data;
        this.tableData.length = 4;
        this.total = res.data.totalCount;
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.categoryMenu(this.detialId);
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.categoryMenu(this.detialId);
    }
  }
};
</script>
<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.courses-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  span:nth-child(2) {
    font-size: 20px;
    padding-left: 10px;
    color: #666666;
  }
  span:nth-child(1) {
    font-size: 24px;
    border-left: 6px solid #14ac60;
    padding-left: 10px;
    font-family: Segoe UI;
    font-weight: bold;
  }
}
.nodata {
  text-align: center;
  margin-top: 50px;
}
p,
span {
  word-wrap: break-word;
}
.content {
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  margin-top: 70px;
  overflow: hidden;
  font-family: Segoe UI;
}
::v-deep .el-pagination .active {
  background-color: #02a152 !important;
}
.topSearch {
  height: 400px;
  text-align: center;
}
.center {
  min-height: calc(100vw / 3.2);
  &-bottom {
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
    .col-margin {
      margin-bottom: 10px;
    }
    .grid-content {
      width: 100%;
      background: rgba(255, 255, 255, 1);
    }
  }
  &-demo {
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-bottom: 1px solid #f9f9f9;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &-desc {
    width: 100%;
    height: 110px;
    overflow: hidden;
    padding: 10px;
    .desc-p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .desc-like {
      font-size: 14px;
      span {
        padding-right: 5px;
      }
    }
    p {
      // height: 64px;
      font-size: 18px;
      line-height: 24px;
      margin: 5px 15px;
      color: #333333;
      span {
        font-size: 14px;
      }
    }
    .center-p {
      margin: 0 calc(100vw / 120);
    }
  }
}
</style>
